<template>
  <div class="yt">
    <el-row class="nmd">
      <el-container>
        <el-header>顶部</el-header>
        <el-container>
          <el-main>
            <router-link to="/daohang/wd/1">
            <el-button type="warning">全部问题</el-button>
            </router-link>
            <router-link to="/wdtiw/wd" style="padding:10px;">
            <el-button type="warning">我要提问</el-button>
            </router-link>
            <div v-for="item in kkk" :key="item.page">
              <ul>
                <li>
                  <div>
                    <router-link to="/xint" style="padding:10px;">
                      <p>想做火腿肠，该准备什么材料</p>
                    </router-link>
                    <p style="font-size:14px;color:#eee">请问我想学做火腿肠，因为小孩好喜欢吃买的又不放心。</p>
                  </div>
                  <div>
                    <div>
                      <div class="fl">
                        1
                        <div class="fr">12-11</div>
                      </div>
                    </div>
                  </div>
                </li>
                <el-divider></el-divider>
                <li>
                  <div>
                    <router-link to="/xint" style="padding:10px;">
                      <p>在电饭锅里蒸面包电饭锅会烧坏吗？</p>
                    </router-link>
                    <p style="font-size:14px;color:#eee ">是的</p>
                  </div>
                  <div>
                    <div>
                      <div class="fl">
                        1
                        <div class="fr">12-11</div>
                      </div>
                    </div>
                  </div>
                </li>
                <el-divider></el-divider>
                <li>
                  <div>
                    <router-link to="/xint" style="padding:10px;">
                      <p>为什么面发好了打出来烧饼就是不起</p>
                    </router-link>
                    <p style="font-size:14px;color:#eee "></p>
                  </div>
                  <div>
                    <div>
                      <div class="fl">
                        0
                        <div class="fr">12-11</div>
                      </div>
                    </div>
                  </div>
                </li>
                <el-divider></el-divider>
                <li>
                  <div>
                    <router-link to="/xint" style="padding:10px;">
                      <p>要是做双皮奶，把奶倒回有奶皮的那一碗是时奶皮破了怎么办？</p>
                    </router-link>
                    <p style="font-size:14px;color:#eee "></p>
                  </div>
                  <div>
                    <div>
                      <div class="fl">
                        0
                        <div class="fr">12-11</div>
                      </div>
                    </div>
                  </div>
                </li>
                <el-divider></el-divider>
              </ul>
              <ul>
                <li>
                  <div>
                    <router-link to="/xint" style="padding:10px;">
                      <p>江米面油炸糕的做法</p>
                    </router-link>
                    <p style="font-size:14px;color:#eee">老北京炸糕</p>
                  </div>
                  <div>
                    <div>
                      <div class="fl">
                        1
                        <div class="fr">12-11</div>
                      </div>
                    </div>
                  </div>
                </li>
                <el-divider></el-divider>
                <li>
                  <div>
                    <router-link to="/xint" style="padding:10px;">
                      <p>腌制糖蒜的配料比例是什么？</p>
                    </router-link>
                    <p style="font-size:14px;color:#eee ">3：1</p>
                  </div>
                  <div>
                    <div>
                      <div class="fl">
                        1
                        <div class="fr">12-11</div>
                      </div>
                    </div>
                  </div>
                </li>
                <el-divider></el-divider>
                <li>
                  <div>
                    <router-link to="/xint" style="padding:10px;">
                      <p>牛鞭炖人参是鲜人参还是干人参</p>
                    </router-link>
                    <p style="font-size:14px;color:#eee ">鲜人参</p>
                  </div>
                  <div>
                    <div>
                      <div class="fl">
                        1
                        <div class="fr">12-11</div>
                      </div>
                    </div>
                  </div>
                </li>
                <el-divider></el-divider>
                <li>
                  <div>
                    <router-link to="/xint" style="padding:10px;">
                      <p>我用豆浆做豆腐脑,做出来好多蜂窝眼一点不细腻是怎么回事</p>
                    </router-link>
                    <p style="font-size:14px;color:#eee ">点豆脑的时候总是起沫什么原因。</p>
                  </div>
                  <div>
                    <div>
                      <div class="fl">
                        1
                        <div class="fr">12-11</div>
                      </div>
                    </div>
                  </div>
                </li>
                <el-divider></el-divider>
              </ul>
            </div>
            <wei-ti></wei-ti>
          </el-main>
          <el-aside width="300px">
            <div>
              <ul class="qew" style="background-color: #fff;border: 1px solid #eae6e3;">
                <p>等待回答问题</p>
                <li class="yz">
                  <router-link to="/xint">
                    <span>胶笋怎么做好吃</span>
                    <p class="ui">29751浏览</p>
                    <el-divider></el-divider>
                  </router-link>
                </li>
                <li class="yz">
                  <router-link to="/xint">
                    <span>油饼怎么做又软又好吃</span>
                    <p class="ui">297551浏览</p>
                    <el-divider></el-divider>
                  </router-link>
                </li>
                <li class="yz">
                  <router-link to="/xint">
                    <span>2016鮰鱼多少钱一斤</span>
                    <p class="ui">22151浏览</p>
                    <el-divider></el-divider>
                  </router-link>
                </li>
                <li class="yz">
                  <router-link to="/xint">
                    <span>低筋面粉可不可以和糯米粉混合</span>
                    <p class="ui">15638浏览</p>
                    <el-divider></el-divider>
                  </router-link>
                </li>
                <li class="yz">
                  <router-link to="/xint">
                    <span>鸭子可以和黄花菜一起炖汤吗</span>
                    <p class="ui">13566浏览</p>
                    <el-divider></el-divider>
                  </router-link>
                </li>
                <li class="yz">
                  <router-link to="/xint">
                    <span>干虾怎样做才好吃</span>
                    <p class="ui">13520浏览</p>
                    <el-divider></el-divider>
                  </router-link>
                </li>
                <li class="yz">
                  <router-link to="/xint">
                    <span>怎样炖鸭汤？鸭子同什么煮汤</span>
                    <p class="ui">13118浏览</p>
                    <el-divider></el-divider>
                  </router-link>
                </li>
                <li class="yz">
                  <router-link to="/xint">
                    <span>我做点心剩下点油酥面还能做什么</span>
                    <p class="ui">12996浏览</p>
                    <el-divider></el-divider>
                  </router-link>
                </li>
                <li class="yz">
                  <router-link to="/xint">
                    <span>用白醋点豆腐脑的比例和步骤?</span>
                    <p class="ui">12567浏览</p>
                    <el-divider></el-divider>
                  </router-link>
                </li>
                <li class="yz">
                  <router-link to="/xint">
                    <span>今天我们包的包子为什么热的</span>
                    <p class="ui">12518浏览</p>
                    <el-divider></el-divider>
                  </router-link>
                </li>
              </ul>
            </div>
            <div>
              <el-avatar
                :size="60"
                src="https://empty"
                style="background-color: #fff;border: 1px solid #eae6e3;"
              >
                <img src="../assets/avatar/1.jpg" />
              </el-avatar>
              <a href="/">
                <p class="tm">味觉世家</p>
              </a>
              <p class="tn">回答了1849个问题</p>

              <a href="/">
                <i class="qa el-icon-plus">关注</i>
              </a>
            </div>
            <el-divider></el-divider>
            <div>
              <el-avatar :size="60" src="https://empty">
                <img src="../assets/avatar/0.jpg" />
              </el-avatar>
              <a href="/">
                <p class="tm">味觉世家</p>
              </a>
              <p class="tn">回答了1849个问题</p>

              <a href="/">
                <i class="qa el-icon-plus">关注</i>
              </a>
            </div>
            <el-divider></el-divider>
            <div>
              <el-avatar :size="60" src="https://empty">
                <img src="../assets/avatar/3.jpg" />
              </el-avatar>
              <a href="/">
                <p class="tm">味觉世家</p>
              </a>
              <p class="tn">回答了1849个问题</p>

              <a href="/">
                <i class="qa el-icon-plus">关注</i>
              </a>
            </div>
            <el-divider></el-divider>
            <div>
              <el-avatar :size="60" src="https://empty">
                <img src="../assets/avatar/5.jpg" />
              </el-avatar>
              <a href="/">
                <p class="tm">味觉世家</p>
              </a>
              <p class="tn">回答了1849个问题</p>

              <a href="/">
                <i class="qa el-icon-plus">关注</i>
              </a>
            </div>
            <el-divider></el-divider>
            <div>
              <el-avatar :size="60" src="https://empty">
                <img src="../assets/avatar/12.jpg" />
              </el-avatar>
              <a href="/">
                <p class="tm">味觉世家</p>
              </a>
              <p class="tn">回答了1849个问题</p>

              <a href="/">
                <i class="qa el-icon-plus">关注</i>
              </a>
            </div>
            <el-divider></el-divider>
            <div>
              <el-avatar :size="60" src="https://empty">
                <img src="../assets/avatar/13.jpg" />
              </el-avatar>
              <a href="/">
                <p class="tm">味觉世家</p>
              </a>
              <p class="tn">回答了1849个问题</p>

              <a href="/">
                <i class="qa el-icon-plus">关注</i>
              </a>
            </div>
            <el-divider></el-divider>
          </el-aside>
        </el-container>
        <div>
          <xyiy-ak style="padding-left:300px;"></xyiy-ak>
        </div>
      </el-container>
    </el-row>
  </div>
</template>

<script>
import XyiyAk from "@/components/XyiY.vue";
import WeiTi from "@/components/WeiTi.vue";
export default {
  props: ["xyiy", "Weiti"],
  components: {
    "xyiy-ak": XyiyAk,
    "wei-ti": WeiTi
  },
  data() {
    return {
      kkk: "1",
      page:1,
    };
  }
};
</script>

<style lang="scss" scoped>
.yt {
  // padding: 250px;
}
.tmd,
.tmm {
  display: inline;
  padding: 15px;
}
.tmd {
  float: right;
}
* {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  cursor: pointer;
}
ul,
li {
  list-style-type: none;
  padding: 10px;
}
.w190 {
  width: 100px;
}
.fl {
  float: right;
}
.fl,
.fr {
  display: inline;
  padding: 15px;
  text-align: center;
  position: relative;
  margin-top: -45px;
}
* {
  padding: 0px;
  margin: 0;
}

.el-pagination {
  text-align: center;
  margin-left: -550px;
}

ul > p {
  text-align: center;
  margin: 10px;
}
qew {
  padding: 0;
  margin: 0;
}
li > span {
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui {
  float: right;
}
.yz {
  margin: -20px;
}
.el-aside {
  overflow: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
}

.tm {
  float: right;
  overflow: hidden;
  margin: 10px;
  margin-right: 160px;
}
.tn {
  float: right;
  overflow: hidden;
  margin: 10px;
  margin-right: 100px;
  margin-top: -22px;
}
.qa {
  overflow: hidden;
  margin-left: 250px;
  color: orangered;
  float: right;
  margin-top: -26px;
}
</style>